import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { TaskScheduleModalPropsType, TaskScheduleModalDataItemType } from './typings'
import { defineComponent, reactive, ref, onMounted, nextTick } from 'vue'
import { ElDialog, ElFormItem, ElDatePicker } from 'element-plus'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'
import { MODAL_NORMAL_WIDTH } from '~/utils/const'

dayjs.extend(duration)

export default defineComponent({
  name: 'TaskScheduleModal',
  props: ['detail', 'doClose'],
  setup(props: TaskScheduleModalPropsType) {
    const proSaasTableRef = ref<ProSaasTableExposeType>()
    const formValues = reactive<TaskScheduleModalDataItemType>({})
    const switchLightStrategyState = useVuexGetters('switchLightStrategy', ['taskTypeEnum'])

    onMounted(() => {
      nextTick(() => {
        formValues.searchTime = [
          dayjs().subtract(2, 'years').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
        nextTick(proSaasTableRef.value?.toSearch)
      })
    })

    const columns: TableColumnProps<TaskScheduleModalDataItemType>[] = [
      {
        label: '执行日期',
        prop: 'executionTime',
        minWidth: 120,
        sortable: true,
        align: 'center'
      },
      {
        label: '任务类型',
        prop: 'taskType',
        minWidth: 100,
        align: 'center',
        enumValues: switchLightStrategyState.taskTypeEnum
      },
      {
        label: '时控开灯时间',
        prop: 'lastOnTime',
        minWidth: 120,
        align: 'center'
      },
      {
        label: '时控关灯时间',
        prop: 'lastOffTime',
        minWidth: 120,
        align: 'center'
      },
      {
        label: '光控开灯作用时间',
        prop: 'lightOnTimeBegin',
        minWidth: 160,
        align: 'center',
        render: ({ row }) => (
          <>
            {row?.lightOnTimeBegin}
            {row?.lightOnTimeBegin && row?.lightOnTimeEnd ? '~' : ''}
            {row?.lightOnTimeEnd}
          </>
        )
      },
      {
        label: '光控关灯作用时间',
        prop: 'lightOffTimeBegin',
        minWidth: 160,
        align: 'center',
        render: ({ row }) => (
          <>
            {row?.lightOffTimeBegin}
            {row?.lightOffTimeBegin && row?.lightOffTimeEnd ? '~' : ''}
            {row?.lightOffTimeEnd}
          </>
        )
      }
    ]

    return () => (
      <ElDialog
        width={MODAL_NORMAL_WIDTH}
        title="任务时间表"
        modelValue={true}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props?.doClose}
      >
        <ProSaasTable<TaskScheduleModalDataItemType>
          ref={proSaasTableRef}
          columns={columns}
          rowKey="id"
          defaultSort={{ prop: 'executionTime', order: 'descending' }}
          dispatchType="switchLightStrategy/GetTaskScheduleList"
          useGridLayout={false}
          noInitSearch
          searchParams={{
            taskId: props?.detail?.id,
            searchTime: undefined,
            // beginTime: formValues.searchTime?.length === 2 && dayjs(formValues.searchTime[0]).format('YYYY-MM-DD'),
            beginTime: formValues.searchTime?.length === 2 ? formValues.searchTime[0] : undefined,
            // endTime: formValues.searchTime?.length === 2 && dayjs(formValues.searchTime[1]).format('YYYY-MM-DD')
            endTime: formValues.searchTime?.length === 2 ? formValues.searchTime[1] : undefined
          }}
          searchFormProps={{
            model: formValues
          }}
          searchformResponsiveCol={[
            <ElFormItem key="searchTime" prop="searchTime">
              <ElDatePicker
                type="daterange"
                v-model={formValues.searchTime}
                valueFormat="YYYY-MM-DD"
              />
            </ElFormItem>
          ]}
        />
      </ElDialog>
    )
  }
})
